<!--
 * @Author: tangcj 572036028@qq.com
 * @Date: 2024-01-25 10:45:48
 * @LastEditors: tangcj 572036028@qq.com
 * @LastEditTime: 2024-01-30 13:24:12
 * @FilePath: /health-gpt-website/src/views/Home/components/Page3.vue
 * @Description: 文件介绍
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="page3">
    <div class="mainBox">
      <div class="contentBox" id="contentBoxPage3">
        <div class="title">E-CARE</div>
        <div class="line"></div>
        <div class="content">
          <div class="textBox1">
            <span class="boldText">全身疾病筛查检测设备</span>
            <span
              >不仅仅可以用于心梗、脑梗等大病的早筛以及临床辅助诊断，其在其他疾病和健康状况的评估中也具有重要作用。与传统体检相比，这种无创体检形式具有许多优势。首先，它避免了有创检查可能带来的感染和并发症风险，使体检过程更加安全和舒适。其次，全身疾病筛查检测设备通常具有更高的检测精度和准确性，能够更早地发现疾病的迹象，为早期治疗和干预提供了可能。</span
            >
          </div>
          <div class="textBox2">
            在检测结束后，被检测者的健康报告可以即时上传到健康宝HGPT上，这一方面方便了用户随时随地查看自己的健康状况，另一方面也使得健康管理师能够快速地获取患者的健康数据，从而更好地进行疾病诊断和健康管理。同时，通过健康宝HGPT应用，被检测者还可以获得个性化的健康建议和指导，帮助他们更好地理解自己的健康状况，并在日常生活中采取更有针对性的保健措施。
          </div>
        </div>
      </div>
    </div>
    <div class="clickBox" @click="nextPage">
      <div class="arrowDown">
        <img src="../../../assets/icon/arrow-down.png" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      showAnimation: false,
    }
  },
  mounted () {
  },
  methods: {
    nextPage () {
      this.$emit('next')
    },
    // 当第一次切换到该页，启用动画
    initAnimation () {
      if (this.showAnimation) { //动画只执行一次
        return false
      }
      // 启用整体文字渲染动画
      let element = document.getElementById("contentBoxPage3")
      element.classList.add("contentBoxAnimation")
      // 下次进入该函数不再执行
      this.showAnimation = true
    },
  },
}
</script>
<style scoped lang="less">
.page3 {
  height: 100%;
  width: 100%;
  background: rgb(109, 100, 100);
  display: flex;
  justify-content: center;
  background-image: url(../../../assets/bgImg/bg3.png);
  background-size: 100% 100%;
  background-attachment: fixed;
  .mainBox {
    width: 1200px;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    .contentBoxAnimation {
      position: absolute;
      animation: popup 1.5s ease-in-out;
      animation-fill-mode: forwards;
      // animation-delay: 1s; /* 设置动画延迟执行时间 */

      @keyframes popup {
        0% {
          top: 50%;
          opacity: 0;
        }
        100% {
          top: 0;
          opacity: 1;
        }
      }
    }
    .contentBox {
      width: 918px;
      height: 522px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      opacity: 0;
      .title {
        font-size: 40px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        color: #333333;
        line-height: 60px;
      }
      .line {
        width: 329px;
        height: 4px;
        background: #123be7;
        border-radius: 50px 50px 50px 50px;
      }
      .content {
        position: absolute;
        bottom: 0;
        width: 918px;
        height: 374px;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 30px 30px 30px 30px;
        .textBox1 {
          margin: 56px 48px;
          .boldText {
            font-weight: 600;
          }
        }
        .textBox2 {
          margin: 0 48px;
        }
      }
    }
  }
}
</style>